import { Tag, Table, Button, Modal, Popover, Switch } from "antd";
import axios from "axios";
import { useEffect, useState } from "react";
import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
/** @import {Right} from '../../../types' */

function RightList() {
    /** @type {[Right[], React.Dispatch<React.SetStateAction<Right[]>>]} */
    const [rights, setRights] = useState([]);
    const columns = [
        {
            title: "ID",
            dataIndex: "id"
        },
        {
            title: "权限名称",
            dataIndex: "title"
        },
        {
            title: "权限路径",
            dataIndex: "key",
            render: (key) => <Tag color="orange">{ key }</Tag>
        },
        {
            title: "操作",
            /** @type {(item: Right)} */
            render: (item) => (
                <div>
                    <Button danger shape="circle" icon={<DeleteOutlined />} onClick={() => handleDelete(item)}></Button>
                    <Popover 
                        content={
                            <Switch onChange={() => handleEnabled(item)} checked={item.pagepermisson} />
                        }
                        title="页面配置项"
                        trigger="click"
                        
                    >
                        <Button type="primary" shape="circle" icon={<EditOutlined />} disabled={!('pagepermisson' in item)} />
                    </Popover>
                </div>
            )
        }
    ];
    /** 删除权限 @type {(item: Right) => void} */
    const handleDelete = (item) => {
        Modal.confirm({
            title: "是否删除？",
            onOk: async () => {
                console.log("DeleteRight", item);
                // 一级菜单项
                if (item.grade === 1) {
                    await axios.delete("/rights/" + item.id);
                    await fetchRights();
                } 
                // 二级菜单项
                else {
                    await axios.delete("/children/" + item.id);
                    await fetchRights();
                }
            }
        });
    };
    /** 修改权限是否开启 @type {(item: Right) => void} */
    const handleEnabled = (item) => {
        // TODO 改用 Immutable / Immer
        console.log("EditRight", item);
        let pagepermisson = item.pagepermisson === 0 ? 1 : 0;
        item.pagepermisson = pagepermisson;
        setRights([...rights]);
        if (item.grade === 1)
            axios.patch("/rights/" + item.id, { pagepermisson:item.pagepermisson });
        else
            axios.patch("/children/" + item.id, { pagepermisson });
    };
    // 拉取权限数据
    const fetchRights = async () => {
        const res = await axios.get("/rights?_embed=children");
        /** @type {Right[]} */
        let data = res.data;
        data.forEach((item) => {
            if (item.children.length === 0)
                delete item.children;
        });
        setRights(data);
    };
    useEffect(() => { fetchRights(); }, []);
    return (
        <Table dataSource={rights} columns={columns} />
    );
}

export default RightList;